<template>
  <div class="app-container">
    <div v-show="active === 1">
      <div class="searchform">
        <!-- 查询条件 -->
        <el-form ref="searchForm" :model="search" size="mini" label-width="90px">
          <el-row :gutter="6">
            <el-col :xs="24" :sm="8" :md="6">
              <el-form-item prop="productName" label="产品名称">
                <el-input v-model="search.productName" placeholder="产品名称" clearable />
              </el-form-item>
            </el-col>

            <el-col :xs="24" :sm="8" :md="6">
              <el-form-item prop="productStatus" label="有效状态">
                <r-select
                  v-model="search.productStatus"
                  :formatter="filterCode"
                  class="form-input"
                  placeholder="请选择"
                  type="1001"/>
              </el-form-item>
            </el-col>
            <div style="text-align:right">
              <el-button type="primary" icon="el-icon-search" @click="searchHandle">查询
              </el-button>
              <el-button icon="el-icon-refresh" @click="resetForm('searchForm')">重置
              </el-button>
            </div>
          </el-row>
        </el-form>
      </div>
      <!-- 表单表头信息 -->
      <div class="table">
        <div class="tableHead">
          <div class="tabletitle">产品大类维护</div>
          <el-button-group>
            <el-button type="primary" icon="el-icon-plus" @click="addProduct()">新增</el-button>
          </el-button-group>
        </div>
        <BaseTable ref="table" @chaneg-size="changeSizeHandle" @chaneg-page="changePageHandle">
          <el-table-column type="index" label="序号" min-width="50"/>
          <el-table-column align="center" label="操作" min-width="100">
            <template slot-scope="scope">
              <el-tooltip class="item" content="编辑" placement="bottom">
                <el-button
                  type="text"
                  style="font-size: 20px;"
                  icon="el-icon-edit-outline"
                  @click="editAddProduct(scope.row)"/>
              </el-tooltip>
              <!-- <el-tooltip class="item" content="编辑车系" placement="bottom">
                <el-button
                  type="text"
                  style="font-size: 20px;"
                  icon="el-icon-edit-outline"
                  @click="editSeries(scope.row)"/>
              </el-tooltip> -->
              <!-- <el-tooltip class="item" content="明细" placement="bottom">
                <el-button type="text" style="font-size: 20px;" icon="el-icon-document" @click="detail(scope.row)"/>
              </el-tooltip> -->
            </template>
          </el-table-column>
          <el-table-column v-if="false" prop="product_id" label="product_id"/>
          <el-table-column prop="product_name" label="产品名称"/>
          <el-table-column prop="product_img" label="产品图片" />
          <el-table-column prop="product_seq" label="排序" />
          <el-table-column :formatter="filterCode" prop="product_status" label="有效状态" type="1001"/>
        </BaseTable>
      </div>
    </div>
    <!-- 新增车系 -->
    <!-- 编辑div -->
    <!-- <div v-show="active === 3">
      <el-form
        v-dialogDrag
        ref="table4"
        :model="form"
        size="mini"
        label-width="90px"
        label-position="right">
        <div class="searchform">
          <el-row :gutter="7">
            <el-col v-if="false" :xs="24" :sm="8" :md="8">
              <el-form-item prop="productId" label="productId">
                <el-input v-model="form.productId" placeholder="ID" clearable />
              </el-form-item>
            </el-col>

            <el-col :xs="24" :sm="8" :md="7">
              <el-form-item prop="productName" label="产品名称">
                <el-input v-model="form.productName" placeholder="产品名称" clearable />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="8" :md="8">
              <el-form-item prop="productStatus" label="有效状态">
                <r-select
                  v-model="form.productStatus"
                  :formatter="filterCode"
                  class="form-input"
                  placeholder="请选择"
                  type="1001"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :xs="24" :sm="8" :md="7">
              <el-form-item prop="productImg" label="产品图片">
                <ImgItemSingle :file-list.sync="productImgView" accept-type-str=".jpg,.png"/>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <div class="table">
          <div class="tableHead">
            <div class="tabletitle">车系信息</div>
            <div class="btnGroup">
              <el-button-group>
                <el-button type="primary" icon="el-icon-plus" @click="openSeries">新增</el-button>
              </el-button-group>
            </div>
          </div>
          <el-table
            v-loading="load"
            ref="Table2"
            :data="productRelList"
            tooltip-effect="dark"
            style="width: 100%"
            stripe
            border
            @selection-change="SelectionChange">
            <el-table-column type="index" label="序号" min-width="20"/>
            <el-table-column align="center" label="操作" min-width="40">
              <template slot-scope="scope">
                <el-tooltip class="item" content="删除" placement="bottom">
                  <el-button type="text" style="font-size: 20px;" icon="el-icon-delete" @click="table2Delete(scope.$index, scope.row)"/>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column v-if="false" prop="rel_id" label="关系id" min-width="50"/>
            <el-table-column v-if="false" prop="series_id" label="车系id" min-width="50"/>
            <el-table-column v-if="false" prop="product_id" label="产品id" min-width="50"/>
            <el-table-column prop="series_name" label="车系名称" min-width="50"/>
            <el-table-column :formatter="filterCode" prop="rel_status" label="关系状态" min-width="50" type="1001"/>
          </el-table>
        </div>
        <div style="text-align:center">
          <el-button type="primary" @click="editSave">保存</el-button>
          <el-button @click="clear">返回</el-button>
        </div>
      </el-form>
    </div> -->
    <!-- 车系查询弹框 -->
    <!-- <el-dialog v-dialogDrag v-if="seriesVisible" :append-to-body="true" :visible.sync="seriesVisible" title="大类车系选择" width="70%"> -->
    <!-- 查询条件 -->
    <!-- <div class="searchform">
        <el-form ref="searchForm" :model="searchSeries" size="mini" label-width="90px">
          <el-row :gutter="6">
            <el-col :xs="24" :sm="8" :md="6">
              <el-form-item prop="seriesName" label="车系名称">
                <el-input v-model="searchSeries.seriesName" placeholder="产品名称" clearable />
              </el-form-item>
            </el-col>

            <el-col :xs="24" :sm="8" :md="6">
              <el-form-item prop="seriesStatus" label="有效状态">
                <r-select
                  v-model="searchSeries.seriesStatus"
                  :formatter="filterCode"
                  class="form-input"
                  placeholder="请选择"
                  type="1001"/>
              </el-form-item>
            </el-col>
            <div style="text-align:right">
              <el-button type="primary" icon="el-icon-search" @click="searchSeriesHandle">查询
              </el-button>
              <el-button icon="el-icon-refresh" @click="resetForm('searchForm')">重置
              </el-button>
            </div>
          </el-row>
        </el-form>
      </div> -->
    <!-- 车系信息 -->
    <!-- <div class="table">
        <div class="tableHead">
          <div class="tabletitle">车系信息</div>
        </div>
        <el-table
          v-loading="load"
          ref="Table4"
          :data="seriesList"
          tooltip-effect="dark"
          style="width: 100%"
          stripe
          border
          @selection-change="SelectionChange">
          <el-table-column type="index" width="50" label="序号"/>
          <el-table-column type="selection" width="40"/>
          <el-table-column prop="series_name" label="车系名称" min-width="50"/>
          <el-table-column :formatter="filterCode" prop="series_status" label="车系状态" min-width="50" type="1001"/>
        </el-table>
        <Pagination :data="page" @change-size="handleSizeChange" @change-page="handleCurrentChange" />
      </div>
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button type="text">
          <i class="el-icon-search magnifier" />
        </el-button>
        <el-button type="primary" @click="req">确 定</el-button>
        <el-button @click="seriesVisible = false">取 消</el-button>
      </div> -->

    <!-- </el-dialog> -->
    <!-- 新增产品div -->
    <!-- 弹框 -->
    <el-dialog
      v-dialogDrag
      v-if="dialogFormVisible"
      :title="clsuseTitle"
      :visible.sync="dialogFormVisible"
      :append-to-body="true"
      :close-on-click-modal="false"
      :show-close="true"
      width="60%"
    >
      <el-form ref="table3" :model="form" :rules="rules" :disabled="!bols" label-width="90px">
        <el-row :gutter="7">
          <el-col v-if="false" :xs="24" :sm="8" :md="8">
            <el-form-item prop="productId" label="productId">
              <el-input v-model="form.productId" placeholder="ID" clearable />
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="8" :md="7">
            <el-form-item prop="productName" label="产品名称">
              <el-input v-model="form.productName" placeholder="产品名称" clearable />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="8" :md="7">
            <el-form-item prop="productStatus" label="有效状态">
              <r-select
                v-model="form.productStatus"
                :formatter="filterCode"
                placeholder="请选择"
                type="1001"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="8" :md="7">
            <el-form-item prop="productSeq" label="排序">
              <el-input v-model="form.productSeq" placeholder="排序" clearable />
            </el-form-item>
          </el-col>
          <!-- <el-col :xs="24" :sm="8" :md="7">
            <el-form-item prop="dmsBrandId" label="品牌">
              <el-select v-model="form.dmsBrandId" :clearable="true" placeholder="请选择" >
                <el-option v-for="item in dmsBrandId" :key="item.code" :label="item.name" :value="item.code">{{ item.name }}</el-option>
              </el-select>
            </el-form-item>
          </el-col> -->
        </el-row>
        <el-row>
          <el-col :xs="24" :sm="8" :md="9">
            <el-form-item prop="productImgView" label="产品图片">
              <ImgItemSingle :file-list.sync="productImgView" :size-tips="imgSize"/>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button type="text">
          <i class="el-icon-search magnifier" />
        </el-button>
        <el-button type="primary" @click="saveProduct">保 存</el-button>
        <el-button @click="cancel()">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getProductList,
  addNewProduct,
  editProduct,
  selectById
  // getSeriesRelList,
  // getSeriesList,
  // addProductRel
  // selectBrandList
} from '@/api/vehicle/productMaintenance.js'
// import {
//   getUserInfoById
// } from '@/api/admin/org/gms/employeeInfo'
import Pagination from '@/components/Pagination'
import BaseTable from '@/components/BaseTable'
import BaseTableNoPage from '@/components/BaseTable/BaseTableNoPage'
import formMixins from '@/mixins/formMixins'
import rSelect from '@/components/Select/Select'
import filtercode from '@/components/Checkbox/filtercode'
import _ from 'lodash'

import ImgItemSingle from '@/components/uploads/ImgItemSingle.vue'
export default {
  name: 'ProductMaintenance',
  components: {
    BaseTable,
    BaseTableNoPage,
    Pagination,
    rSelect,
    filtercode,
    ImgItemSingle
  },
  mixins: [formMixins],
  data() {
    return {
      // dmsBrandId: [],
      imgSize: [
        { item: '144px*108px' }
      ],
      thisProductId: '',
      multiple: [],
      productRelList: [],
      seriesAddList: [],
      load: false,
      page: {},
      multipleSelection: [],
      seriesList: [],
      productImgView: [],
      active: 1,
      seriesVisible: false,
      dialogFormVisible: false,
      editorOption: {},
      bols: true,
      clsuseTitle: '',
      dialogType: '',
      saveBS: '',
      type: 0,
      searchSeries: {
        limit: 10,
        pageNum: 1,
        seriesName: '',
        seriesStatus: ''
      },
      search: {
        limit: 10,
        pageNum: 1,
        productName: '',
        productStatus: 10011001
      },
      dialogVisible: false,
      rules: {
        productStatus: [{
          required: true,
          message: '请选择产品状态',
          trigger: 'blur'
        }],
        productName: [{
          required: true,
          message: '请输入产品名称',
          trigger: 'blur'
        }],
        productImgView: [{
          required: true,
          message: '请选择产品图片',
          trigger: 'blur'
        }],
        productSeq: [{
          required: true,
          message: '请输入排序',
          trigger: 'blur'
        }]
        // productImg: [{
        //   required: true,
        //   message: '请选择产品图片2',
        //   trigger: 'blur'
        // }]
        // dmsBrandId: [{
        //   required: true,
        //   message: '请选择产品品牌',
        //   trigger: 'blur'
        // }]
      },
      form: {
        productId: '',
        productName: '',
        productImg: '',
        productImgView: [],
        productStatus: '',
        productSeq: ''
        // dmsBrandId: ''
      }
    }
  },
  computed: {},
  watch: {
  },
  mounted() {
    this.searchHandle()
    // this.selectBrandId()
  },
  methods: {
    // selectBrandId() {
    //   selectBrandList().then(res => {
    //     this.dmsBrandId = res
    //   }).catch(err => {
    //   })
    // },
    // table2Delete(index, row) {
    //   for (let i = 0; i < this.productRelList.length; i++) {
    //     if (this.productRelList[i] === row) {
    //       // const a = this.seriesList.length
    //       const pushData = {
    //         series_id: this.productRelList[i].series_id,
    //         series_name: this.productRelList[i].series_name,
    //         series_status: '10011001'
    //       }
    //       this.seriesList.push(pushData)
    //       this.$delete(this.productRelList, i)
    //     }
    //   }
    // },
    // 车系关系编辑保存
    // editSave() {
    //   this.$refs['table4'].validate(valid => {
    //     // this.dialogType = 'edit'
    //     if (valid) {
    //       this.form.productImg = this.productImgView
    //       if (this.dialogType === 'edit') {
    //         editProduct(this.form, this.form.EMP_ID).then(res => {
    //           this.$message({
    //             type: 'success',
    //             message: '产品大类编辑成功!'
    //           })
    //           this.cancel()
    //           this.dialogFormVisible = false
    //           this.searchHandle()
    //         }).catch(err => {

    //         })
    //       }
    //     }
    //   })
    //   addProductRel(JSON.parse(JSON.stringify(this.productRelList)), this.form.productId).then(res => {
    //     this.$message({
    //       type: 'success',
    //       message: '产品车系编辑成功!'
    //     })
    //     this.cancel()
    //     this.dialogFormVisible = false
    //     this.searchHandle()
    //   }).catch(err => {
    //   })
    // },
    // SelectionChange(val) {
    //   this.multipleSelection = val
    // },
    // req() {
    //   for (let i = 0; i < this.multipleSelection.length; i++) {
    //     for (let x = 0; x < this.seriesList.length; x++) {
    //       if (this.seriesList[x] === this.multipleSelection[i]) {
    //         this.$delete(this.seriesList, x)
    //         this.productRelList.push(this.multipleSelection[i])
    //       }
    //     }
    //   }
    //   this.seriesVisible = false
    //   this.$message({
    //     type: 'success',
    //     message: '添加成功!'
    //   })
    // },
    // handleSizeChange(size) {
    //   this.searchSeries.limit = size
    //   this.searchRole()
    // },
    // handleCurrentChange(page) {
    //   this.searchSeries.pageNum = page
    //   this.searchRole()
    // },
    // searchSeriesHandle() {
    //   const searchSeries = _.extend(this.searchSeries)
    //   // table3.wait()
    //   getSeriesList(searchSeries).then(res => {
    //     this.seriesList = res.rows
    //     this.page = res
    //     this.load = false
    //   }).catch(err => {
    //     this.load = false
    //   })
    // },
    // openSeries() {
    //   this.searchSeriesHandle()
    //   this.seriesVisible = true
    // },
    // async editSeries(data) {
    //   this.form.productId = data.product_id
    //   this.form.productName = data.product_name
    //   this.form.productStatus = data.product_status
    //   this.form.productImg = data.product_img
    //   await selectById(data.product_id)
    //     .then(res => {
    //       this.productImgView = res.productFile
    //     })
    //   this.active = 3
    //   // 在进入的时候查出车系的全部
    //   this.searchSeriesHandle()
    //   getSeriesRelList(data).then(res => {
    //     this.productRelList = res.rows
    //   }).catch(err => {
    //   })
    // },
    clear() {
      this.active = 1
    },
    // 取消弹窗
    cancel() {
      this.dialogFormVisible = false
    },
    // 明细
    async detail(data) {
      this.bols = false
      this.saveBS = false
      this.dialogType = 'detail'
      this.clsuseTitle = '产品明细'
      // await selectById(data.product_id)
      //   .then(res => {
      this.form.productId = data.product_id
      this.form.productName = data.product_name
      this.form.productImg = data.product_img
      this.form.productStatus = data.product_status
      this.form.productSeq = data.product_seq
      await selectById(data.product_id)
        .then(res => {
          this.productImgView = res.productFile
        })
      // this.form.clauseStatus = res.clause_status
      // this.form.clauseType = res.clause_type
      // })
      this.dialogFormVisible = true
    },
    // 查询
    searchHandle() {
      const table = this.$refs['table']
      const search = _.extend(this.search)
      table.wait()
      getProductList(search).then(res => {
        table.complete().filData(res)
      }).catch(err => {
        table.complete()
      })
    },
    // 增加页面弹框
    addProduct() {
      this.resetForm('form')
      this.bols = true
      this.form.productId = ''
      this.form.productName = ''
      this.form.productImg = ''
      this.form.productStatus = ''
      this.form.productSeq = ''
      // this.form.dmsBrandId = ''
      this.productImgView = []
      this.saveBS = true
      this.dialogType = 'add'
      this.clsuseTitle = '新增产品'
      this.dialogFormVisible = true
    },
    // 编辑
    async editAddProduct(data) {
      this.bols = true
      this.saveBS = true
      this.dialogType = 'edit'
      this.clsuseTitle = '编辑产品'
      // await selectById(data.product_id)
      //   .then(res => {
      this.form.productId = data.product_id
      this.form.productName = data.product_name
      this.form.productStatus = data.product_status
      this.form.productImg = data.product_img
      this.form.productSeq = data.product_seq
      await selectById(data.product_id)
        .then(res => {
          this.productImgView = res.productFile
        })
      this.dialogFormVisible = true
    },
    // 增加和编辑
    saveProduct() {
      this.form.productImgView = this.productImgView
      this.$refs['table3'].validate(valid => {
        if (valid) {
          // const params = {
          //   isDealer: this.dialogType,
          //   productId: this.form.productId,
          //   productStatus: this.form.productStatus,
          //   productName: this.form.productName,

          //   productImg: this.productImgView
          // }
          this.form.productImg = this.productImgView
          if (this.dialogType === 'add') {
            addNewProduct(this.form).then(res => {
              this.$message({
                type: 'success',
                message: '产品大类新增成功!'
              })
              this.cancel()
              this.dialogFormVisible = false
              this.searchHandle()
            }).catch(err => {
            })
          }
          if (this.dialogType === 'edit') {
            editProduct(this.form, this.form.EMP_ID).then(res => {
              this.$message({
                type: 'success',
                message: '产品大类编辑成功!'
              })
              this.cancel()
              this.dialogFormVisible = false
              this.searchHandle()
            }).catch(err => {

            })
          }
        }
      })
    }
  }
}

</script>

<style scoped>
.content{
  overflow-y: auto;
  overflow-x: auto
}
.editor {
    height: 400px;
    width: 900px;
  }
.sizeTip{
  font-style: normal;
    margin-bottom: 8px;
    font-size: 13px;
    color: rgb(255, 0, 13);
    height: 12px;

  }
</style>
